/<template>
  <div class="accountmanage">
    <!-- 头部搜索部分 -->
    <div class="shareheader">
      <!-- <div class="shareheader_top">
        <div style="min-width:260px;margin: 5px 10px 18px 0px;">
          <span style="font-size: 13px; padding: 0px 8px 0px 0px">所属客户:</span>
          <el-select v-model="orderSearch.customer_id" filterable placeholder="请选择" style="width: 165px;">
            <el-option v-for="item2 in clientList" :key="item2.id" :label="item2.name" :value="item2.id">
            </el-option>
          </el-select>
        </div>
        <div style="min-width:260px;margin: 5px 10px 18px 0px;">
          <span style="font-size: 13px; padding: 0px 8px 0px 0px">账号:</span>
          <el-input v-model="orderSearch.user_name" placeholder="请输入账号" style="width: 210px; padding: 0px 8px 0px 0px" />
        </div>
        <div style="min-width:260px;margin: 5px 10px 18px 0px;">
          <span style="font-size: 13px; padding: 0px 8px 0px 0px">手机号:</span>
          <el-input v-model="orderSearch.mobile" placeholder="请输入电话" style="width: 210px; padding: 0px 8px 0px 0px" />
        </div>
        <div style="min-width:100px;margin: 5px 10px 18px 0px;">
          <el-button type="primary" icon="el-icon-search" data-tracker="P57-1" @click="CustomerListFn()">查询</el-button>
          <el-button icon="el-icon-refresh-left" data-tracker="P57-2" @click="resultClickFn">重置</el-button>
        </div>
      </div> -->
    </div>
    <!-- 头部内容 -->
    <div class="sharecontent_header"
      style="margin-bottom: 10px; overflow: hidden; height: 30px;display: flex; justify-content:space-between ;">
      <div class="sharecontent_header_right">
        <el-button data-tracker="P57-3" v-permission="'company_customer_account_create'" type="primary"
          @click="handleAddClick">新增</el-button>
        <el-button data-tracker="P57-4" v-permission="'company_customer_account_delete'" type="primary"
          @click="handleDeleteClickFn">删除</el-button>
      </div>
      <div style="display: flex;">
        <div>
          <el-button type="primary" size="mini" plain @click="resultClickFn"
            style="margin: 0px 10px 0px 0px;">重置</el-button>
          </el-button>
        </div>
        <div>
          <SettinUp :settype="37" :objSettinUpdata="objSettinUp" key="3"></SettinUp>
        </div>
      </div>
    </div>
    <div>
      <TableHeader ref="TableHeaderList" :header_data_list="header_data_list" :HeaderData="HeaderData"
        :propMap="propMap" :objheader="objheader" @childEvent="handleDelete" @orderIdNumsEvent="handleDeleteType"
        :operation_type="operation_type" @handleClickDetail_second="handleClickDetail_second"
        @handleClickEdit_second="handleClickEdit_second" particulars="finance_invoice_book_list"
        redact="finance_invoice_book_update">
      </TableHeader>
    </div>
    <div class="sharecontent_header_left">
      <el-pagination background small :current-page="orderSearch.page" :page-sizes="[10, 20, 50, 100]"  :page-size="orderSearch.PageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="totalListNum" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
    <!-- 列表数据 -->
    <!-- <el-table :data="orderList" border style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column type="index" width="50" label="序号">
      </el-table-column>
      <el-table-column prop="user_name" label="账号" width="120">
      </el-table-column>
      <el-table-column prop="type_id_name" label="所属客户" width="300">
      </el-table-column>
      <el-table-column prop="nickname" label="用户名" width="120">
      </el-table-column>
      <el-table-column prop="mobile" label="手机号" width="300">
      </el-table-column>
      <el-table-column prop="updated_user" label="创建人" width="120">
      </el-table-column>
      <el-table-column prop="updated_at" label="创建时间" width="180">
        <template slot-scope="scope">
          <span v-time="scope.row.updated_at"></span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button data-tracker="P57-5" v-permission="'company_customer_account_detail'" @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button data-tracker="P57-6" v-permission="'company_customer_account_update'" type="text" size="small" @click="redact(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table> -->
    <!-- 创建弹窗 -->
    <el-drawer :title="usertitle" :visible.sync="drawer" :before-close="handleClose">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"
        :disabled="disableddata">
        <el-form-item label="账号" prop="user_name" v-if="userType == 1" :rules=" [{ required: true, message: '请输入账号', trigger: 'blur' },  {
            validator: this.checkUser,
            trigger: 'blur',
          }]">
          <el-input v-model.trim="ruleForm.user_name" style="width:50%"></el-input>
        </el-form-item>
        <el-form-item label="账号" prop="user_name" :rules=" [{ required: true, message: '请输入账号', trigger: 'blur' }]"
          v-if="userType == 3 ||userType == 2">
          <el-input v-model.trim="ruleForm.user_name" style="width:50%" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" v-if="userType == 1">
          <el-input v-model="ruleForm.password" style="width:50%"></el-input>
        </el-form-item>
        <!-- <el-form-item label="修改密码" v-if="userType == 3">
          <el-input v-model="ruleForm.password" placeholder="无法查看密码****" style="width:50%"></el-input>
        </el-form-item> -->
        <el-form-item label="手机号" prop="mobile" v-if="userType == 1 ||  userType == 2">
          <el-input v-model.trim="ruleForm.mobile" style="width:50%"></el-input>
        </el-form-item>
        <el-form-item label="手机号" v-if="userType == 3">
          <el-input v-model.trim="ruleForm.phone" style="width:50%"></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="ruleForm.nickname" style="width:50%"></el-input>
        </el-form-item>
        <el-form-item label="所属客户" v-if="userType == 1">
          <el-select v-model="ruleForm.type_id" filterable placeholder="请选择" style="width:50%">
            <el-option v-for="item2 in clientList" :key="item2.id" :label="item2.name" :value="item2.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属客户" v-if="userType == 3 ||userType == 2">
          <el-select :disabled="true" v-model="ruleForm.type_id" filterable placeholder="请选择" style="width:50%">
            <el-option v-for="item2 in clientList" :key="item2.id" :label="item2.name" :value="item2.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="userType == 1">
          <el-button data-tracker="P57-7" type="primary" @click="submitForm('ruleForm')">保存</el-button>
          <el-button data-tracker="P57-8" @click="handleClose('ruleForm')">取消</el-button>
        </el-form-item>
        <el-form-item v-if="userType == 3">
          <el-button data-tracker="P57-9" type="primary" @click="compile('ruleForm')">保存</el-button>
          <el-button data-tracker="P57-10" @click="handleClose('ruleForm')">取消</el-button>
          <el-button data-tracker="P57-11" @click="modification()">修改密码</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
    <el-dialog title="修改密码" :visible.sync="centerDialogVisible" width="400px" center>
      <el-form :model="passwordpage" :rules="passwordpagerules" ref="ruleform" style="width:300px">
        <el-form-item label="新密码" prop="password">
          <el-input v-model="passwordpage.password"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button data-tracker="P57-13" @click="closeClickSubmit()">取 消</el-button>
        <el-button data-tracker="P57-12" type="primary" @click="handleClickSubmit('ruleform')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import TableHeader from "@/page/orderform/components/TableHeader/tableheader.vue";
import SettinUp from "@/page/orderform/components/settingUp/settingUp.vue";
import {
  accountlist,
  accountcreate,
  accountdetail,
  accountupdate,
  accountdelete,
} from "@/api/customer";
import { INfOuserList } from "@/api/user";
import { customerPeople } from "@/api/information";
import { getToken } from "@/utils/auth";
import { mobileCount, UserCount } from "@/api/organization";
import md5 from "js-md5";
export default {
  name: "accountmanage",
  components: { TableHeader, SettinUp },
  data() {
    return {
      centerDialogVisible: false,
      disableddata: false,
      usertitle: "账号",
      userType: 0, //用来判断创建1 详情2 修改3
      user_id: "", //用户id
      drawer: false,
      //   客户列表
      clientList: [],
      //   搜索
      orderSearch: {
        user_name: "",
        customer_id: "",
        mobile: "",
        Page: 1,
        PageSize: 20,
      },
      totalListNum: 0,
      currentPage4: 1,
      // 创建内容
      ruleForm: {
        user_name: "", // 账号
        password: "", // 密码
        mobile: "", //手机号
        nickname: "", // 用户名
        type_id: "", //客户id，取等录后的id
        phone: "", //手机号
      },
      webpassword: "",
      rules: {
        user_name: [
          {
            validator: this.checkUser,
            trigger: "blur",
          },
        ],
        nickname: [{ required: true, message: "用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        type_id: [{ required: true, message: "客户", trigger: "blur" }],
        mobile: [
          {
            validator: this.checkMobile,
            trigger: "blur",
          },
        ],
        phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
      },
      passwordpage: {
        password: "",
      },
      passwordpagerules: {
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      type: "", //判断当infog type 0 type1
      type_id: "",
      orderList: [],
      deletparamlist: [],
      // ==========
      header_data_list: [],
      propMap: {},
      obj_list: {},
      HeaderData: [],
      waybillIdNums: [],
      totalPage: 0,
      operation_type: 1,
    };
  },
  mounted() {
    // 用户列表接口
    this.Pageaccountlist();
    this.PagecustomerPeople();
    this.PageINfOuserList();
  },
  methods: {
    // 确认密码修改
    handleClickSubmit(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          this.passwordpage.password;
          this.centerDialogVisible = false;
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    // 修改密码
    modification() {
      this.centerDialogVisible = true;
    },
    // 取消修改密码
    closeClickSubmit() {
      this.centerDialogVisible = false;
      this.passwordpage.password = ""; //修改新密码
    },
    // 关闭
    handleClose() {
      this.drawer = false;
      this.disableddata = false;
      Object.assign(this.$data.ruleForm, this.$options.data().ruleForm);
      // Object.assign(this.$data.personage, this.$options.data().personage)
    },
    // 检测手机号
    checkMobile(rule, val, cb) {
      if (val != "") {
        mobileCount({ mobile: val }).then((res) => {
          if (res.data.count > 0) {
            cb(new Error("手机号已绑定"));
          } else {
            cb();
          }
        });
      } else {
        cb();
      }
    },
    // 检查用户名是否重复
    checkUser(rule, val, cb) {
      UserCount({ username: val }).then((res) => {
        if (res.data > 0) {
          cb(new Error("账号重复"));
        } else {
          cb();
        }
      });
    },
    // 列表选中接口
    handleSelectionChange(val) {
      var deleid = [];
      for (var i = 0; i < val.length; i++) {
        deleid.push(val[i].id);
      }
      this.deletparamlist = deleid;
    },
    // 删除
    handleDeleteClickFn() {
      var param = {
        id: this.waybillIdNums,
      };
      accountdelete(param).then((res) => {
        if (res.code == "10000") {
          this.Datamessage("删除成功", "success");
          this.Pageaccountlist();
        }
      });
    },
    handleSizeChange(val) {
      this.orderSearch.PageSize = val;
      // console.log(this.orderSearch.PageSize);
      this.Pageaccountlist();
    },
    handleCurrentChange(val) {
      this.orderSearch.Page = val;
      this.Pageaccountlist();
    },
    // 查询接口
    CustomerListFn() {
      this.Pageaccountlist();
    },
    // 重置接口
    resultClickFn() {
      this.$refs.TableHeaderList.childMethod();
      this.currentPage4 = 1;
      // this.Pageaccountlist()
    },
    // 创建按钮
    handleAddClick() {
      this.userType = 1;
      this.drawer = true;
      this.usertitle = "创建账号";
    },
    // 详情按钮
    handleClick(row) {
      this.drawer = true;
      this.disableddata = true;
      this.userType = 2;
      this.accoutderList(row.id);
      this.usertitle = "账号详情";
    },
    // 详情的数据
    accoutderList(id) {
      var param = {
        id: id,
      };
      accountdetail(param).then((res) => {
        var res = res.data;
        (this.ruleForm.user_name = res.user_name), // 账号
          (this.ruleForm.password = ""), // 密码
          (this.webpassword = res.password);
        (this.ruleForm.mobile = res.mobile), //手机号
          (this.ruleForm.phone = res.mobile), //手机号
          (this.ruleForm.nickname = res.nickname), // 用户名
          (this.ruleForm.type_id = res.type_id); //客户i
      });
    },
    // 编辑接口
    redact(row) {
      this.drawer = true;
      this.userType = 3;
      this.user_id = row.id;
      this.accoutderList(row.id);
      this.usertitle = "编辑账号";
    },
    // 修改接口
    compile(ruleForm) {
      var Passworddata = "";
      // console.log(this.passwordpage.password);
      if (this.passwordpage.password != "") {
        Passworddata = md5(this.passwordpage.password);
      } else {
        Passworddata = "";
      }
      var param = {
        id: this.user_id + "",
        user_name: this.ruleForm.user_name, // 账号
        password: Passworddata, // 密码
        mobile: this.ruleForm.phone, //手机号
        nickname: this.ruleForm.nickname, // 用户名
        type_id: this.ruleForm.type_id, //客户id，取等录后的id
      };
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          accountupdate(param).then((res) => {
            this.closeweb();
            this.Pageaccountlist();
            this.Datamessage("修改成功", "success");
          });
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    // 列表接口
    Pageaccountlist() {
      var param = {
        // "user_name": this.orderSearch.user_name,// 账号
        // "customer_id": this.orderSearch.customer_id + "",// 公司id
        // "mobile": this.orderSearch.mobile,//手机号
        ...this.obj_list,
        header_id: 37 + "",
        page: this.orderSearch.Page, // 页码
        page_size: this.orderSearch.PageSize, //每页数量
      };
      accountlist(param).then((res) => {
        // var res = res.data
        // this.orderList = res.list
        // this.totalListNum = res.total
        this.orders = res.data.list || [];
        this.orders.unshift({});
        this.header_data_list = this.orders;
        this.HeaderData = res.data.item_list;
        this.Fntransformation(this.HeaderData);
        this.totalListNum = res.data.total;
      });
    },
    // 客户管理的人
    PagecustomerPeople() {
      var param = {
        name: "",
        is_send: "1",
      };
      customerPeople(param).then((res) => {
        var res = res.data;
        this.clientList = res;
      });
    },
    // 用户信息
    PageINfOuserList() {
      INfOuserList({ token: getToken("Token") }).then((res) => {
        var res = res.data;
        this.type = res.type;
        this.type_id = res.type_id;
      });
    },
    // 创建用户
    submitForm(ruleForm) {
      if (this.type == 0) {
        this.ruleForm.type_id = this.ruleForm.type_id;
      } else if (this.type == 1) {
        this.ruleForm.type_id = this.type_id;
      }
      var param = {
        user_name: this.ruleForm.user_name, // 账号
        password: md5(this.ruleForm.password), // 密码
        mobile: this.ruleForm.mobile, //手机号
        nickname: this.ruleForm.nickname, // 用户名
        type_id: this.ruleForm.type_id + "", //客户id，取等录后的id
      };
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          accountcreate(param).then((res) => {
            if (res.code == "10000") {
              this.closeweb();
              this.Pageaccountlist();
              this.Datamessage("创建成功", "success");
            }
          });
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    // 关闭页面清空数据
    closeweb() {
      this.drawer = false;
      (this.ruleForm.user_name = ""), // 账号
        (this.ruleForm.password = ""), // 密码
        (this.ruleForm.mobile = ""), //手机号
        (this.ruleForm.nickname = ""), // 用户名
        (this.ruleForm.type_id = ""); //客户i
      this.passwordpage.password = ""; //修改新密码
    },
    // 提示的语
    Datamessage(content, val) {
      this.$message({
        message: content,
        type: val,
      });
    },
    // ===
    objheader(obj) {
      var data = {
        header_id: 37 + "",
        ...obj,
      };
      this.obj_list = obj;
      accountlist(data).then((res) => {
        this.header_data_list = res.data.list;
        if (res.code === 10000 && res.data.list !== null) {
          this.header_data_list.unshift({});
          this.totalListNum = res.data.total;
          this.orderSearch.page = res.data.page;
          this.orderSearch.PageSize = res.data.page_size;
        } else {
          this.header_data_list = [{}];
          this.totalListNum = 0;
          this.orderslength = 0;
        }
      });
    },
    Fntransformation(obj) {
      const result = {};
      for (const prop in obj) {
        if (obj.hasOwnProperty(prop)) {
          if (obj[prop].send_name !== "") {
            result[obj[prop].name] = obj[prop].show_name;
          } else {
            result[obj[prop].name] = obj[prop].name;
          }
        }
      }
      this.propMap = result;
    },
    handleDelete(index, id, type) {
      this.handleJumpDetail(id);
    },
    handleDeleteType(value) {
      this.waybillIdNums = value;
    },
    handleClickDetail_second(val) {
      this.handleClick(val);
    },
    handleClickEdit_second(val) {
      this.redact(val);
    },
    objSettinUp() {
      this.Pageaccountlist();
    },
  },
};
</script>
<style lang="less" scoped>
.accountmanage {
  padding: 10px 15px;
  background-color: #fff;

  .sharecontent_header_left {
    display: flex;
    margin: 10px 0px 0px 0px;
    justify-content: flex-end;
  }

  .shareheader {
    margin: 0 auto;

    .shareheader_top {
      display: flex;
      flex-wrap: wrap;
    }
  }
}
</style>